<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <th:block th:include="MainInterface/include :: common-css" />

</head>

<body class="fixed-left">
<div id="wrapper">

    <th:block th:include="MainInterface/include :: header-menu(1)" />

    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row" id="all">
                    <div class="col-sm-12">
                        <h1 class="page-title">图书管理</h1>
                    </div>
                    <div class="col-md-12">
                        <table class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>图书编号</th>
                                <th>图书名称</th>
                                <th>借阅状态</th>
                                <th>书籍样式</th>
                                <th>书籍作者</th>
                                <th>书籍数量</th>
                                <th>出版社</th>
                                <th>出版时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>

                            <tr th:each="booksList:${bookPage.list}">
                                <td>
                                    <a  target="_blank"
                                       th:text="${booksList.bookNo}" ></a>
                                </td>
                                <td th:text="${booksList.bookName}">西游记</td>
                                <td th:text="${booksList.statusName}">已借完</td>
                                <td th:text="${booksList.cateName}">经典</td>
                                <td th:text="${booksList.bookAuthor}">吴承恩</td>
                                <td th:text="${booksList.bookCount}">1</td>
                                <td th:text="${booksList.name}">北京出版社</td>
                                <td th:text="${booksList.pressDate}">2024-6-14</td>
                                <td>
                                    <a th:href="${'/books/edit'+booksList.id}"
                                       class="btn btn-primary btn-sm waves-effect waves-light m-b-5">
                                        <i class="fa fa-edit"></i> <span>编辑</span></a>
                                    <a href="javascript:void(0)" th:onclick="'delBook('+${booksList.id}+')'"
                                       class="btn btn-danger btn-sm waves-effect waves-light m-b-5">
                                        <i class="fa fa-trash-o"></i> <span>删除</span></a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <button class="btn btn-primary btn-sm waves-effect waves-light m-b-5" style="background-color:rgb(133,250,133);color: black" onclick="add()">新增数据</button>
                        <div>
                            <!--分页-->
                            <div class="clearfix">
                                <ul class="pagination m-b-5 pull-right">
                                    <li th:if="${!bookPage.isFirstPage}" >
                                        <a th:href="${'/books/?pageNum='+bookPage.prePage}">>上一页</a>
                                    </li>
                                    <li  th:each="num:${bookPage.navigatepageNums}">
                                        <a th:href="${'/books/?pageNum='+num}" th:text="${num}">1</a>
                                        <li th:if="${!bookPage.isLastPage}" >
                                            <a th:href="${'/books/?pageNum='+bookPage.nextPage}">下一页</a>
                                </ul>
                            </div>

                        </div>
                        </div>
                    </div>
                <!-- 新增页面 -->
                <div id="add" class="add" style="display: none">
                    <form id="bookList">
                        <div class="dialog">
                            <div class="dialog-box">
                            <!--                    <div>-->
                            <!--                        <label>ID</label>-->
                            <!--                        <input  name="id" >-->
                            <!--                    </div>-->
                            <h1>新增书籍</h1>
                            <p>书籍号 : <input name="bookNo" ></p>
                            <p>书籍名称 : <input name="bookName" ></p>
                            <p>
                                书籍状态 :
                                <select name="bookStatus">
                                    <option th:each="statusList:${statusList}"
                                            th:value="${statusList.id}"
                                            th:text="${statusList.statusName}">已借完</option>
                                </select>
                            </p>
                            <p>书籍类型 :
                                <select name="bookType">
                                    <option th:each="categroyList:${categroyList}"
                                            th:value="${categroyList.id}"
                                            th:text="${categroyList.cateName}">科幻</option>
                                </select>
                            </p>
                            <p>
                                作者 :
                                <input name="bookAuthor">
                            </p>
                            <p>
                                书籍数量 :
                                <input name="bookCount" >
                            </p>
                            <p>
                                出版社 :
                                <select name="publisher" >
                                    <option th:each="publisherList:${publisherList}"
                                            th:value="${publisherList.id}"
                                            th:text="${publisherList.name}"
                                    >北京出版社</option>
                                </select>
                            </p>
                            <p>
                                出版时间 :
                                <input type="date" name="pressDate" >
                            </p>

                            <div>
                                <input style="width: 75px ; height : 50px " type="button" value="添加" onclick="bookAdd()">
                                <!--            <button id="book_save" >提交</button>-->
                                <button style="width: 75px ; height : 50px"><a href="/books">返回</a></button>

                            </div>
                        </div>
                        </div>
                    </form>

                </div>

                </div>
            </div>
        </div>

    </div>

    <th:block th:include="MainInterface/include :: foter" />
    <th:block th:include="MainInterface/include :: common-js" />


<!--                <td >-->
<!--                    <button style="background-color:rgb(248,255,137);color: black">修改</button>-->
<!--                    <button style="background-color:rgb(232,15,15);color: black" href="javascript:void(0)" th:onclick="'delBook('+${booksList.id}+')'">删除</button>-->
<!--                </td>-->
<!--            </tr>-->
<!--        </table>-->
<!--        <button style="background-color:rgb(133,250,133);color: black">新增数据</button>-->
<!--    </div>-->
<!--</div>-->
<script>
    function delBook(id){
        if(confirm('确定删除该数据吗?')){
            $.ajax({
                type:"post",
                url:"/books/delete",
                data:{id:id},
                dataType: 'json',
                success:function (result) {
                    if(result.code==0){
                        window.alert("删除成功");
                        window.location.reload();
                    } else {
                        window.alert(result.msg || "删除失败");
                    }

                }
            });
        }

    }
    function bookAdd(){
        // $("#add").show();
        $.ajax({
            type:"post",
            url:"/books/saveOrUpdata",
            data:$("#bookList").serialize(),
            async:false,
            dataType: 'json',
            success:function (result) {
                console.log($("#bookList").serialize(),)
                if(result.code==0){
                    window.alert("添加成功");
                    window.location.href="/books"
                } else {
                    window.alert(result.msg || "添加失败");
                }

            }
        });
    }

    function add(){
        $("#add").show();
        $("#all").hide();
    }
</script>
</body>
<style>
    .id{
        position: relative;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
    }
    table td {
        font-size: 12px;
        padding: 10px 30px;

        border-bottom: 1px solid #999;

        border-right: 1px solid #999;
    }
    table {
        border-top: 1px solid #999;

        border-left: 1px solid #999;

        border-spacing: 0;/*去掉单元格间隙*/

    }


</style>
</html>